import React, { PureComponent } from "react"
import Portal from "../../components/01Portals"

export default class PortalPage extends PureComponent {
  constructor() {
    super()
    this.state = {
      isShow: true,
      title: "title",
      content: "content"
    }
  }

  changeModelShow() {
    const { isShow } = this.state
    this.setState({
      isShow: !isShow
    })
  }

  inputChange(e) {
    this.setState({
      [e.target.name]: e.target.value
    })
  }

  render() {
    const { title, content, isShow } = this.state
    return (
      <div style={{ border: "1px dashed #333", padding: "20px" }}>
        <input
          value={title}
          name="title"
          onChange={(e) => {
            this.inputChange(e)
          }}
        />
        <input
          value={content}
          name="content"
          onChange={(e) => {
            this.inputChange(e)
          }}
        />
        <Portal {...this.state} />
        <button onClick={this.changeModelShow.bind(this)}>
          {isShow ? "关闭" : "打开"}弹窗
        </button>
      </div>
    )
  }
}
